<template>
    <div class="train">
      <!--tab切换-->
      <div class="tab-wrapper">
        <div class="tab-switch">
          <ul class="tab-item v-flex-row-around border-bottom">
            <li class="tab-list v-flex-column-center" v-for="(item,index) in tabList" :key="index" @click="tabSwitch(item,index)">
              <div class="tab-name" :class="{active:tabFlag == index}">
                <span>{{item.name}}</span>
              </div>
              <div class="tab-flag" v-show="tabFlag == index"></div>
            </li>
          </ul>
          <!--子类别-->
          <div class="tab-types v-flex-row-around">
            <div :class="{subTabActive:subTabFlag === 0}" @click="switchSubTab(0)">全部</div>
            <div :class="{subTabActive:subTabFlag === 1}" @click="switchSubTab(1)">视频</div>
            <div :class="{subTabActive:subTabFlag  === 2}" @click="switchSubTab(2)">音频</div>
            <div :class="{subTabActive:subTabFlag  === 3}" @click="switchSubTab(3)">课件</div>
          </div>
          <div class="tab-content v-flex-row-start" v-for="(item,index) in curriculum" :key="index" @click="toProductDetailsPage">
            <div class="curriculum-img">
              <img :src="item.img" alt="">
            </div>
            <div class="curriculum-introduce">
              <div class="curriculum-text">
                <div class="curriculum-title">如何激励你的员工</div>
                <div class="curriculum-sub-title">推动企业利润快速增长</div>
                <div class="curriculum-sub-title">2626人学习</div>
              </div>
              <div class="curriculum-price v-flex-row-between">
                <div class="origin-price">￥ 5000.00 </div>
                <div class="vip-price">VIP: 4888.00</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!---->
      <!--购物车图标-->
      <div class="shopping-cart-icon">
        <img src="/static/image/index/shopping-cart.png" alt="">
      </div>
      <!-- 底部tabBar -->
      <div class="home_footer">
        <tab-bar selected="2"></tab-bar>
      </div>
    </div>
</template>

<script>
  import tabBar from 'components/tabBar/tabBar'
  export default {
    name: "train",
    data () {
      return {
        tabFlag: 0,
        subTabFlag:0,
        tabList:[
          { id:"002",name:'个人提升'},
          { id:"001",name:'团队管理'},
          { id:"001",name:'培训管理'},
          { id:"001",name:'关于我们'}
        ],
        curriculum:[
          {img:'http://res.youtenet.com/bdbData/r/gou/u/201806/041349208m7b.jpg'},
          {img:'http://res.518.fm/bdbData/r/gou//u/201712/29211356eka3.jpg'},
          {img:'http://res.youtenet.com/bdbData/r/gou/u/201806/041349208m7b.jpg'},
          {img:'http://res.518.fm/bdbData/r/gou//u/201712/29211356eka3.jpg'},
          {img:'http://res.youtenet.com/bdbData/r/gou/u/201806/041349208m7b.jpg'}
        ]
      }
    },
    methods: {
      tabSwitch (item,index){
        this.tabFlag = index;
      },
      switchSubTab (status) {
        this.subTabFlag = status;
      },
      // 跳转到产品详情页面
      toProductDetailsPage () {
        this.$router.push({
          path: '/pages/product/productDetails'
        })
      }
    },
    components: {
      tabBar
    }
  };
</script>

<style scoped lang="less">

  .train {
    padding-bottom:132rpx;
  }





  .tab-wrapper {
    background-color:#fff;
  }
  .tab-item{
    padding:12rpx 0px;
    color:#B3B4B5;
  }
  .tab-list {
    padding:12rpx 0rpx;
    position:relative;
  }
  .tab-name {
    font-size:@font_size_28;
  }
  .tab-flag {
    width:38rpx;
    height:5rpx;
    background-color:@theme_bg_color;
    position:absolute;
    bottom:0px;
    left:50%;
    transform: translate(-50%,0);
  }
  .active {
    color:#333;
  }
  .subTabActive {
    color:#2B80FF;
    border-radius:20px;
    background-color:#F9F9F9;
  }
  .tab-types {
    text-align:center;
    color:#B3B4B5;
    padding:7px 0px;
    font-size:@font_size_28;
  }
  .tab-types div{
    width:98rpx;
    height:42rpx;
  }

  .tab-content {
    padding:23rpx 20rpx;
    .curriculum-img {
      width: 300rpx;
      height:170rpx;
      & > img {
        width: 300rpx;
        height:170rpx;
        border-radius:10rpx;
      }
    }
  }
  .curriculum-introduce {
    padding:0px 10px;
    box-sizing:border-box;
  }
  .curriculum-title {
    color:#333;
    font-size:@font_size_28;
    font-weight:bold;
  }
  .curriculum-sub-title {
    font-size:@font_size_24;
    color:#B3B4B5;
  }
  .curriculum-price {
    color:#FF5050;
    font-size:@font_size_32;
  }
  .vip-price{
    align-self: self-end;
    padding-left:26rpx;
    color:#FFBA00;
  }
  .shopping-cart-icon {
    width:128rpx;
    height:128rpx;
    position:fixed;
    right:8px;
    bottom:212rpx;
    & > img {
      width:128rpx;
      height:128rpx;
    }
  }

</style>
